<template>
  <el-dialog :title="form.id?'编辑分类':'添加分类'" :visible="dialogFormVisible" @close="closeFn">
    <el-form :model="form" ref="form" :rules="rules">
      <el-form-item label="标题" prop="title" :label-width="formLabelWidth">
        <el-input v-model="form.title" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="desc" :label-width="formLabelWidth">
        <el-input type="textarea" rows="4" v-model="form.desc" autocomplete="off" resize="none"></el-input>
      </el-form-item>
      <el-form-item label="封面" :label-width="formLabelWidth">
        <!-- 图片 -->
        <!-- <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
          :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload> -->
        <!-- <el-input placeholder="强制设置图片跳过上传"></el-input> -->
        <!-- <el-row>
          <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
          </el-switch>
          强制设置图片跳过上传
        </el-row> -->
        <upload-img ref="img"></upload-img>

        <el-button v-if="form.image" @click="handlePictureCardPreview">预览</el-button>
        <!-- 预览图弹窗 -->
        <el-dialog :visible.sync="dialogVisible" append-to-body>
          <img width="100%" :src="form.image" alt="">
        </el-dialog>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit">确 定</el-button>
      <el-button @click="closeFn">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { addCategorie, getCategorie ,editCategorie} from '@/api/categories'
export default {
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        image: '',
        title: '',
        desc: ''
      },
      rules: {
        title: [
          { required: true, trigger: 'blur', message: '请输入标题' }
        ],
        desc: [
          {
            required: true, trigger: 'blur', message: '请输入描述'
          }
        ]
      },
      dialogImageUrl: '',
      dialogVisible: false,
      formLabelWidth: '60px',
      value: false,

    }
  },

  created() {

  },
  methods: {
    // 获取分类信息
    async getCategorie(id) {
      const res = await getCategorie(id)
      // console.log('获取分类信息', res);
      this.form = res.data
      // console.log('表单信息',this.form);
      // 回传给上传图片组件,才能显示图片
      this.$refs.img.imageUrl = res.data.image
    },
    // 提交处理
    async submit() {
      // 上传中禁止提交
      if (this.$refs.img.percent > 0 && this.$refs.img.percent < 100) {
        return this.$message.warning('图片正在上传中，稍后再进行保存')
      }
      // 校验
      this.$refs.form.validate(async bool => {
        if (bool) {
          if (this.form.id) {
            // 编辑
            await editCategorie(this.form)
          } else {
            // 新增
            this.form.image = this.$refs.img.imageUrl
            // form.image='' 调用接口报错 
            if(!this.form.image){
              delete this.form.image
            }
            await addCategorie(this.form)
          }
          this.closeFn()
          this.$emit('updateEvent')
        }
      })


    },
    // 图片处理
    // handleRemove(file, fileList) {
    //   console.log(file, fileList);
    // },
    handlePictureCardPreview() {
      this.dialogVisible = true;
    },
    //   关闭弹窗
    closeFn() {
      this.$emit('update:dialogFormVisible', false)
      this.form = {
        image: '',
        title: '',
        desc: ''
      }
      // 同时将组件内的图片url也清空
      this.$refs.img.imageUrl = ''
      this.$refs.form.resetFields()
    }
  }
}
</script>
<style scoped>

</style>